<template>
  <transition name="confirm-fade">
    <div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')">
      <div class="confirm-content-wrap" @click.stop>
        <h3 class="my-confirm-title">{{ titleText }}</h3>
        <p class="my-confirm-content">{{ content }}</p>
        <div class="my-operation">
          <div v-if="type==='confirm'" class="my-cancel-btn" @click="clickFun('clickCancel')">
            <p class="my-btn-text my-border-right">{{ cancelText }}</p>
          </div>
          <div class="confirm-btn" @click="clickFun('clickConfirm')">
            <p class="my-btn-text">{{ confirmText }}</p>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        isShowConfirm: false, // 用于控制整个窗口的显示/隐藏
        titleText: '操作提示', // 提示框标题
        content: 'Say Something ...', // 提示框的内容
        cancelText: '取消', // 取消按钮的文字
        confirmText: '确认', // 确认按钮的文字
        type: 'confirm', // 表明弹框的类型：confirm - 确认弹窗（有取消按钮）；alert - 通知弹框（没有取消按钮）
        outerData: null // 用于记录外部传进来的数据，也可以给外部监听userBehavior，事件的函数提供判断到底是哪个事件触发的
      }
    },
    methods: {
      show (content, config) {
        this.content = content || 'Say Something ...'
        if (Object.prototype.toString.call(config) === '[object Object]') {
          // 确保用户传递的是一个对象
          this.titleText = config.titleText || '操作提示'
          this.cancelText = config.cancelText || '取消'
          this.confirmText = config.confirmText || '确认'
          this.type = config.type || 'confirm'
          this.outerData = config.data || null
        }
        this.isShowConfirm = true
      },
      hidden () {
        this.isShowConfirm = false
        this.titleText = '操作提示'
        this.cancelText = '取消'
        this.confirmText = '确认'
        this.type = 'confirm'
        this.outerData = null
      },
      clickFun (type) {
        this.$emit('userBehavior', type, this.outerData)
        this.hidden()
      }
    }
  }
</script>
<style scoped  lang="less">
  @import "publicLess.less";
  .my-confirm {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    /* 这里防止当用户长按屏幕，出现的黑色背景色块，以及 iPhone 横平时字体的缩放问题 */
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  // /* 进入和出去的动画 */
  // .confirm-fade-enter-active {
  //   animation: opacity 0.3s;
  // }
  // .confirm-fade-enter-active .confirm-content-wrap {
  //   animation: scale 0.3s;
  // }
  // .confirm-fade-leave-active {
  //   animation: outOpacity 0.2s;
  // }
  /* 包裹层容器样式 */
  .confirm-content-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 540/50rem;
    transform: translate(-50%,-50%);
    background-color: #fff;
    border-radius: 12/50rem;
    z-index: 9999;
    user-select: none;
  }
  /* 顶部标题部分 */
  .my-confirm-title {
    padding-top: 34/50rem;
    text-align: center;
    font-size: 34/50rem;
    font-weight: 500;
    color: #333;
  }
  /* 中间内容部分 */
  .my-confirm-content {
    padding: 0 20/50rem;
    padding-top: 30/50rem;
    margin-bottom: 42/50rem;
    text-align: center;
    font-size: 28/50rem;
    color: #666;
    line-height: 1.5;
  }
  /* 底部按钮样式 */
  .my-operation {
    display: flex;
    border-top: 1/50rem solid #eee;
  }
  @media screen and (max-width: 374px){
    .my-operation {
      border-top: 3/50rem solid #eee;
    }
  }
  .my-operation .my-cancel-btn, .confirm-btn {
    flex: 1;
    color: #333
  }
  .my-operation .confirm-btn {
    color: @PublicColor;
  }
  .my-btn-text {
    text-align: center;
    font-size: 28/50rem;
    margin: 15/50rem 0;
    padding:15/50rem 0;
    height: auto;
  }
  .header-box{
    .my-btn-text {
      margin: 0;
      padding: 0;
    }
  }
  .my-operation{
    text-align: center;
    font-size: 28/50rem;
  }
  /* 其他修饰样式 */
  .my-border-right {
    border-right:1/50rem solid #eee;
  } 
  @media screen and (max-width: 374px){
    .my-border-right {
      border-right:3/50rem solid #eee;
    } 
  }
  /* 进来的动画 */
  @keyframes opacity {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes scale {
    0% {
      transform: scale(0);
    }
    60% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  /* 出去的动画 */
  @keyframes outOpacity {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
</style>